// 基于准备好的dom，初始化echarts实例
import echartsGL from 'echarts-gl' // 引入echarts
import earth from '../static/img/earth.jpg';
import bathymetry_bw_composite_4k from '../static/img/bathymetry_bw_composite_4k.jpg';
import starfield from '../static/img/starfield.jpg';
import night from '../static/img/night.jpg';
import clouds from '../static/img/clouds.png';
import canyon from '../static/canyon.hdr';
export default {
  name: 'index',
  data() {
    return {
      list: ['3d地球', '3D 柱状图', '3D 散点图', '3D 曲面'],
      myChart: null
    }
  },
  mounted() {
    this.open(3);
  },
  methods: {
    open(n) {
      if (this.myChart !== null) {
        this.myChart.dispose();
      }
      this['drawLine' + n]();
    },
    drawLine0() {
      this.myChart = this.$echarts.init(document.getElementById('myChart2'));
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      let echarts = this.$echarts;
      let option = {
        backgroundColor: '#000',
        globe: {
          baseTexture: earth,
          heightTexture: bathymetry_bw_composite_4k,
          displacementScale: 0.1,
          shading: 'lambert',
          environment: starfield,
          light: {
            ambient: {
              intensity: 0.1
            },
            main: {
              intensity: 1.5
            }
          },
          layers: [{
            type: 'blend',
            blendTo: 'emission',
            texture: night
          }, {
            type: 'overlay',
            texture: clouds,
            shading: 'lambert',
            distance: 5
          }]
        },
        series: []
      };
      myChart.setOption(option);
    },
    drawLine1() {
      this.myChart = this.$echarts.init(document.getElementById('myChart2'));
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      let echarts = this.$echarts;
      this.$axios.get('/api/lifeTable').then(res => {
        let data = res.data;
        let option = {
          grid3D: {},
          tooltip: {},
          xAxis3D: {
            type: 'category'
          },
          yAxis3D: {
            type: 'category'
          },
          zAxis3D: {},
          visualMap: {
            max: 1e8,
            dimension: 'Population'
          },
          dataset: {
            dimensions: [
              'Income',
              'Life Expectancy',
              'Population',
              'Country',
              {name: 'Year', type: 'ordinal'}
            ],
            source: data
          },
          series: [
            {
              type: 'bar3D',
              // symbolSize: symbolSize,
              shading: 'lambert',
              encode: {
                x: 'Year',
                y: 'Country',
                z: 'Life Expectancy',
                tooltip: [0, 1, 2, 3, 4]
              }
            }
          ]
        };
        myChart.setOption(option);
      });
    },
    drawLine2() {
      this.myChart = this.$echarts.init(document.getElementById('myChart2'));
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      let echarts = this.$echarts;
      var indices = {
        name: 0,
        group: 1,
        id: 16
      };
      var schema = [
        {name: 'name', index: 0},
        {name: 'group', index: 1},
        {name: 'protein', index: 2},
        {name: 'calcium', index: 3},
        {name: 'sodium', index: 4},
        {name: 'fiber', index: 5},
        {name: 'vitaminc', index: 6},
        {name: 'potassium', index: 7},
        {name: 'carbohydrate', index: 8},
        {name: 'sugars', index: 9},
        {name: 'fat', index: 10},
        {name: 'water', index: 11},
        {name: 'calories', index: 12},
        {name: 'saturated', index: 13},
        {name: 'monounsat', index: 14},
        {name: 'polyunsat', index: 15},
        {name: 'id', index: 16}
      ];
      var fieldIndices = schema.reduce(function (obj, item) {
        obj[item.name] = item.index;
        return obj;
      }, {});
      var groupCategories = [];
      var groupColors = [];
      var fieldNames = schema.map(function (item) {
        return item.name;
      });
      fieldNames = fieldNames.slice(2, fieldNames.length - 2);
      function getMaxOnExtent(data) {
        var colorMax = -Infinity;
        var symbolSizeMax = -Infinity;
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          var colorVal = item[fieldIndices[config.color]];
          var symbolSizeVal = item[fieldIndices[config.symbolSize]];
          colorMax = Math.max(colorVal, colorMax);
          symbolSizeMax = Math.max(symbolSizeVal, symbolSizeMax);
        }
        return {
          color: colorMax,
          symbolSize: symbolSizeMax
        };
      }
      var config = app.config = {
        xAxis3D: 'protein',
        yAxis3D: 'fiber',
        zAxis3D: 'sodium',
        color: 'fiber',
        symbolSize: 'vitaminc',
        onChange: function () {
          var max = getMaxOnExtent(data);
          if (data) {
            myChart.setOption({
              visualMap: [{
                max: max.color / 2
              }, {
                max: max.symbolSize / 2
              }],
              xAxis3D: {
                name: config.xAxis3D
              },
              yAxis3D: {
                name: config.yAxis3D
              },
              zAxis3D: {
                name: config.zAxis3D
              },
              series: {
                dimensions: [
                  config.xAxis3D,
                  config.yAxis3D,
                  config.yAxis3D,
                  config.color,
                  config.symbolSiz
                ],
                data: data.map(function (item, idx) {
                  return [
                    item[fieldIndices[config.xAxis3D]],
                    item[fieldIndices[config.yAxis3D]],
                    item[fieldIndices[config.zAxis3D]],
                    item[fieldIndices[config.color]],
                    item[fieldIndices[config.symbolSize]],
                    idx
                  ];
                })
              }
            });
          }
        }
      };
      app.configParameters = {};
      ['xAxis3D', 'yAxis3D', 'zAxis3D', 'color', 'symbolSize'].forEach(function (fieldName) {
        app.configParameters[fieldName] = {
          options: fieldNames
        };
      });
      this.$axios.get('/api/nutrients').then(res => {
        let data = res.data;
        var max = getMaxOnExtent(data);
        myChart.setOption({
          tooltip: {},
          visualMap: [{
            top: 10,
            calculable: true,
            dimension: 3,
            max: max.color / 2,
            inRange: {
              color: ['#1710c0', '#0b9df0', '#00fea8', '#00ff0d', '#f5f811', '#f09a09', '#fe0300']
            },
            textStyle: {
              color: '#fff'
            }
          }, {
            bottom: 10,
            calculable: true,
            dimension: 4,
            max: max.symbolSize / 2,
            inRange: {
              symbolSize: [10, 40]
            },
            textStyle: {
              color: '#fff'
            }
          }],
          xAxis3D: {
            name: config.xAxis3D,
            type: 'value'
          },
          yAxis3D: {
            name: config.yAxis3D,
            type: 'value'
          },
          zAxis3D: {
            name: config.zAxis3D,
            type: 'value'
          },
          grid3D: {
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisPointer: {
              lineStyle: {
                color: '#ffbd67'
              }
            },
            viewControl: {
              // autoRotate: true
              // projection: 'orthographic'
            }
          },
          series: [{
            type: 'scatter3D',
            dimensions: [
              config.xAxis3D,
              config.yAxis3D,
              config.yAxis3D,
              config.color,
              config.symbolSiz
            ],
            data: data.map(function (item, idx) {
              return [
                item[fieldIndices[config.xAxis3D]],
                item[fieldIndices[config.yAxis3D]],
                item[fieldIndices[config.zAxis3D]],
                item[fieldIndices[config.color]],
                item[fieldIndices[config.symbolSize]],
                idx
              ];
            }),
            symbolSize: 12,
            // symbol: 'triangle',
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(255,255,255,0.8)'
            },
            emphasis: {
              itemStyle: {
                color: '#fff'
              }
            }
          }]
        });
      });
    },
    drawLine3() {
      this.myChart = this.$echarts.init(document.getElementById('myChart2'));
      let myChart = this.$echarts.init(document.getElementById('myChart2'));
      let echarts = this.$echarts;
      var sin = Math.sin;
      var cos = Math.cos;
      var pow = Math.pow;
      var sqrt = Math.sqrt;
      var cosh = Math.cosh;
      var sinh = Math.sinh;
      var PI = Math.PI;

      var aa = 0.4;
      var r = 1 - aa * aa;
      var w = sqrt(r);

      let option = {
        tooltip: {},
        visualMap: {
          show: false,
          dimension: 2,
          min: -5,
          max: 5,
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          }
        },
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        grid3D: {
          show: false,
          postEffect: {
            enable: true,
            SSAO: {
              enable: true,
              radius: 4,
              quality: 'high',
              intensity: 1.5
            }
          },
          temporalSuperSampling: {
            enable: true
          },
          light: {
            main: {
              intensity: 2,
              shadow: true
            },
            ambient: {
              intensity: 0
            },
            ambientCubemap: {
              texture: canyon,
              exposure: 2,
              diffuseIntensity: 0.2,
              specularIntensity: 3
            }
          }
        },
        series: [{
          type: 'surface',
          parametric: true,
          silent: true,
          wireframe: {
            show: false
          },
          shading: 'realistic',
          realisticMaterial: {
            roughness: 0.2,
            metalness: 1
          },
          parametricEquation: {
            u: {
              min: -13.2,
              max: 13.2,
              step: 0.2
            },
            v: {
              min: -37.4,
              max: 37.4,
              step: 0.2
            },
            x: function (u, v) {
              var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
              return -u + (2 * r * cosh(aa * u) * sinh(aa * u) / denom);
            },
            y: function (u, v) {
              var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
              return 2 * w * cosh(aa * u) * (-(w * cos(v) * cos(w * v)) - (sin(v) * sin(w * v))) / denom;
            },
            z: function (u, v) {
              var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
              return  2 * w * cosh(aa * u) * (-(w * sin(v) * cos(w * v)) + (cos(v) * sin(w * v))) / denom
            }
          }
        }]
      };
      myChart.setOption(option);
    }
  }
}
